<template>
<div class="tw-w-full tw-h-full tw-flex">
    <div class="tw-flex-1 tw-h-screen">
      <q-btn class="tw-m-2" label="确认" color="primary" @click="setTrain()"/>
      <ConfigList  v-if="config" class="tw-overflow-auto tw-pb-2" :config="config"/>
    </div>
    <div class="tw-flex-2 tw-h-screen">
      <div class="tw-w-full tw-h-full"  v-if="data">
        <LineChart  class="tw-w-full tw-h-1/3" cid="train_loss" :data="ExtractData(data,'epoch','train_loss')" title="train_loss"/>
        <LineChart class="tw-w-full tw-h-1/3" cid="valid_loss" :data="ExtractData(data,'epoch','valid_loss')" title="valid_loss"/>
        <LineChart class="tw-w-full tw-h-1/3" cid="test_loss" :data="ExtractData(data,'epoch','test_loss')" title="test_loss"/>
      </div>
    </div>
</div>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import LineChart from './LineChart.vue';
import ConfigList from './ConfigList.vue';
const props = defineProps({
  model:{
    type:String,
    required:true,
    default:''
  }
})
let data = ref(null)
let config = ref(null)
let uid = ref(null)

let setTrain = ()=>{
    return fetch('/api/',{
        method:'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body:JSON.stringify({
            "method": "TrainError.PreTrain",
            //TODO: 这里的params 从config里面取，目前先写死 config
            "params": [{"mode":"pa","dataset":'ETTh1',"attn":"prob","freq":"h",
        "seq_len":96,"pred_len":24}]
        })
        }).then(res=>res.json()).then(res=>{
        console.log(res)
            uid.value = res.result['tid']
            localStorage.setItem('uid',uid.value)
    }).then(()=>{
// 每隔5s 调用一次fetchNew  从而更新data
// TODO: 销毁 timer 后端还得接口 （轮询api 有点dirty，websocket 或者grpc???)
// 
        let timer = setInterval(()=>{
            fetchNew()
        },20000)
    })
}
let fetchOld = ()=>{
    return fetch('/api/',{
      method:'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body:JSON.stringify({
        "method": "TrainError.GetError",
        "params": [{"id":uid.value}]
      })
    }).then(res=>res.json()).then(res=>{
      data.value = res.result['train_dict']
    })
    }
let fetchNew = ()=>{
    return fetch('/api/',{
    method:'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body:JSON.stringify({
        "method": "TrainError.GetError",
        "params": [{"id":uid.value}]
    })
    }).then(res=>res.json()).then(res=>{
        data.value = res.result['train_dict']
        console.log(res);
        console.log(data.value);
        
    })
}
if (localStorage.getItem('uid')) {
    uid.value = localStorage.getItem('uid')
    fetchOld()
}
function ExtractData(data, key1, key2)
{
  let x = []
  let y = []
  for(let i=0;i<data.length;i++)
  {
    x.push(data[i][key1])
    y.push(data[i][key2])
  }
  return {'x':x,'y':y}
}

onMounted(()=>{
    let modelName = props.model
    fetch('/api/',{
      method:"POST",
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        //TODO: change  TrainError.GetConfig to 
        "method": "TrainError.GetConfig", 
        "params": [],
      })
    }).then(res=>res.json()).then(res=>{
      config.value = res.result
    })
    fetchOld()
})


</script>